<template>
	<view class="content">
		<u-navbar :placeholder='true' title="權限" leftIcon="arrow-leftward" @leftClick="leftClick">
		</u-navbar>
		<view class="main">
			<u-checkbox-group placement="column" @change="checkAll">
				<u-checkbox :checked="allchecked" activeColor="#645AED" :customStyle="{marginBottom: '8px'}" label="全选"
					name="全选">
				</u-checkbox>
			</u-checkbox-group>
			<view class="menu">
				<view class="title">菜单</view>
				<view class="cbox">
					<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange1">
						<u-checkbox activeColor="#645AED" :customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in power_options.slice(0,16)" :key="index" :label="item.power_name"
							:name="item.power_id" :checked="item.check">
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<view class="title">功能</view>
				<view class="cbox">
					<u-checkbox-group v-model="checkboxValue2" placement="column" @change="checkboxChange2">
						<u-checkbox activeColor="#645AED" :customStyle="{marginBottom: '8px'}"
							v-for="(item, index) in power_options.slice(16,23)" :key="index" :label="item.power_name"
							:name="item.power_id" :checked="item.check">
						</u-checkbox>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">
			確定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				allchecked: false,
				power_options: [ // 权限选项
					{
						power_id: 16,
						power_name: '我的商品',
						check: false
					},
					{
						power_id: 24,
						power_name: '我的商品收藏',
						check: false
					},
					{
						power_id: 17,
						power_name: '首页收藏',
						check: false
					},
					{
						power_id: 1,
						power_name: '管理子公司/分行',
						check: false
					},
					{
						power_id: 3,
						power_name: '管理收貨地址',
						check: false
					},
					{
						power_id: 2,
						power_name: '管理部門',
						check: false
					},
					{
						power_id: 5,
						power_name: '管理用戶',
						check: false
					},
					{
						power_id: 4,
						power_name: '修改密碼',
						check: false
					},
					{
						power_id: 18,
						power_name: '報價車',
						check: false
					},
					{
						power_id: 19,
						power_name: '報價車訂單',
						check: false
					},
					{
						power_id: 20,
						power_name: '購物車',
						check: false
					},
					{
						power_id: 11,
						power_name: '訂單狀態',
						check: false
					},
					{
						power_id: 12,
						power_name: '支付狀態',
						check: false
					},
					{
						power_id: 13,
						power_name: '訂單月匯總',
						check: false
					},
					{
						power_id: 14,
						power_name: '數據分析',
						check: false
					},
					{
						power_id: 15,
						power_name: '月結單下載',
						check: false
					},
					{
						power_id: 6,
						power_name: '報價',
						check: false
					},
					{
						power_id: 7,
						power_name: "下訂單",
						check: false
					},
					{
						power_id: 8,
						power_name: "價格顯示",
						check: false
					},
					{
						power_id: 9,
						power_name: "取消訂單",
						check: false
					},
					{
						power_id: 10,
						power_name: "修改訂單",
						check: false
					},
					{
						power_id: 21,
						power_name: "申請退貨",
						check: false
					},
					{
						power_id: 23,
						power_name: "再次下單",
						check: false
					},
				],
				checkboxValue1: [],
				checkboxValue2: [],
				totalcheckbox: [],
			}
		},
		methods: {
			submit() {
				if (this.allchecked) {
					this.totalcheckbox = []
					this.power_options.forEach(item => {
						item.check = true
						this.totalcheckbox.push(item.power_id)
					})
				} else {
					this.totalcheckbox = []
					this.totalcheckbox = this.checkboxValue1.concat(this.checkboxValue2);
				}
				uni.setStorageSync('powers', this.totalcheckbox)
				uni.navigateBack({ //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			checkAll() {
				this.allchecked = !this.allchecked
				if (this.allchecked) {
					this.totalcheckbox = []
					this.power_options.forEach(item => {
						item.check = true
						this.totalcheckbox.push(item.power_id)
					})
				} else {
					this.totalcheckbox = []
					this.power_options.forEach(item => {
						item.check = false
					})
				}
			},
			checkboxChange1(n) {
				console.log(this.totalcheckbox);

			},
			checkboxChange2(n) {
				console.log(this.totalcheckbox);

			},
			leftClick(url) {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		position: relative;
		width: 100%;
		height: 100vh;

		.main {
			padding: 32rpx;

			.menu {
				.title {
					padding: 24rpx 0;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #1F1F1F;
				}

				.cbox {
					margin-left: 46rpx;
				}

			}
		}

		.btn {
			position: absolute;
			bottom: 15rpx;
			left: 50%;
			transform: translateX(-50%);
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			line-height: 80rpx;
			color: #FFFFFF;
			width: 686rpx;
			height: 80rpx;
			text-align: center;
			background: #645AED;
			opacity: 1;
			border-radius: 30rpx;
		}
	}
</style>